<template>
	<view>
		<view class="head" @click="onSwitch">
			<text :id="0" :class="{'active': id==0}">未领取</text>
			<text :id="1" :class="{'active': id==1}">未使用</text>
			<text :id="2" :class="{'active': id==2}">已过期(已使用)</text>
		</view>
		<view class="coupon" v-if="couponList.length!=0">
			<view class="coupon-box couponBgColor1" v-for="(item,index) in couponList" :key="index">
				<view class="left" @click="onDetails(item.SendId)">
					<view class="leftContainer">
						<text class="priceSign">￥</text>
						<text class="couponPrice">{{item.FValue}}</text>
						<text class="couponName">({{item.FName}})</text>
					</view>
					<text class="explain">使用规则: 满{{item.FMinValue}}元~{{item.FMaxValue}}元可用</text>
					<text class="explain end" v-if="id==0">领取有效时间: {{item.activeEndDate}}</text>
					<text class="explain end" v-else-if="id==1">使用有效时间: {{item.FormartDateTime}}</text>
					<text class="explain end" v-else></text>
				</view>
				<text class="splitLine"></text>
				<text class="right" v-if="id==0" @click="couponPayment(item,index)">立即领取</text>
				<text class="right" v-else-if="id==1" @click="navTo('/pages/category/category')">立即使用</text>
				<text class="right" v-else @click="">不可使用</text>
			</view>
		</view>
		<view v-else class="coupon">
			暂无优惠券
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	export default {
		data() {
			return {
				id: 0,
				couponList: [],
				arr1:[],
				arr2:[],
				arr3:[],
			};
		},
		onLoad() {
			this.coupon();
		},
		methods:{
			...mapMutations(['onCoupon','onCard']),
			coupon(){
				this.$util.util('MemberShop/CouponList',{},'POST').then(res=>{
					console.log(res);
					res.forEach(item=>{
						let timestamp = Date.parse(new Date());//
						let tiem1 = parseInt(item.FActiveEndDate.slice(6,item.FActiveEndDate.length-2));
						if(item.FStatus==0){//未使用
							let tiem = parseInt(item.FEndTime.slice(6,item.FEndTime.length-2));//
							if(timestamp<tiem){
								this.arr2.push(item);
							}else{
								this.arr3.push(item);
							}
						}else if(item.FStatus==-1&&timestamp<tiem1&&item.FCount>0){//为领取
							item.activeEndDate = this.formatDate(tiem1);
							this.arr1.push(item);
							this.couponList.push(item);
						}else{//已过期(已使用)
							this.arr3.push(item);
						}
					})
					let number = this.arr2.length;
					this.onCoupon(number);
				}).catch(error=>console.log(error));
			},
			//时间转换
			formatDate(value){
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			},
			navTo(url){
				uni.switchTab({
					url: url,
				})
			},
			onSwitch(e){
				console.log(e);
				this.id = e.target.id;
				this.couponList = [];
				switch(this.id){
					case '0': 
						this.couponList = this.arr1;
						break;
					case '1':
						this.couponList = this.arr2;
						break;
					case '2':
						this.couponList = this.arr3;
						break;
				}
				console.log(this.couponList)
				return this.couponList;
			},
			couponPayment(item,index){
				uni.showLoading({
					title: '请稍后'
				})
				this.$util.util('MemberShop/CpuonSend',{Para1:item.FItemID},'POST').then(res=>{
					setTimeout(()=>{
						this.$api.msg('领取成功');
						this.couponList.splice(index, 1);
						this.arr1 = [];
						this.arr2 = [];
						this.arr3 = [];
						this.coupon();
						uni.hideLoading();
					}, 600)
				})
			},
			onDetails(id){
				if(this.id==1){
					uni.navigateTo({
						url: `/pages/coupon/details?type=0&id=${id}`
					})
				}
			}
		},
	}
</script>

<style lang="scss">
	.head{
		width: 100%;
		height: 88upx;
		line-height: 88upx;
		background-color: #fff;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		top: 0upx;
		z-index: 100;
		box-shadow: 0upx 12upx 12upx rgba(21,51,77,0.05);
	}
	.active {
	    border-bottom: 4rpx solid #F4CAA6;
	}
	.coupon{
		overflow: hidden;
		padding: 120upx 30upx 30upx;
		display: flex;
		flex-wrap: wrap;
		.couponBgColor1 {
		    background-image: radial-gradient(circle at 598upx 16upx ,transparent 0,transparent 16upx,#e15852 16upx,#e15852 100%);
		    background-position: 690upx -16upx;
		    // background-size: 100% 83px;
		}
		.coupon-box{
			width: 100%;
			height: 200upx;
			// margin: 0 auto;
			position: relative;
			margin-bottom: 40upx;
		}
		.splitLine {
			height: 160upx;
			top: 23upx;
			right: 90upx;
			width: 2upx;
			border: 2upx dashed rgba(255,255,255,.3);
			position: absolute;
		}
		.right{
			float: right;
			height: 200upx;
			-webkit-writing-mode: tb-rl;
			-ms-writing-mode: tb-rl;
			writing-mode: tb-rl;
			line-height: 80upx;
			font-size: 12px;
			text-align: center;
			color: rgba(255,255,255,.5);
			letter-spacing: 1px;
			// position: absolute;
			// right: 28upx;
		}
		.left{
			width: 574upx;
			height: 200upx;
			float: left;
			position: relative;
			.end{
				position: absolute;
				bottom: 0;
				left: 0;
			}
		};
		.leftContainer {
			// width: 380upx;
			float: left;
			// text-align: center;
			margin-left: 20upx;
			margin-bottom: 20upx;
			padding-top: 20upx;
			.priceSign {
				color: #fff;
				font-size: 12px;
				line-height: 24upx;
				display: inline-block;
				vertical-align: top;
			}
			.couponPrice {
				color: #fff;
				font-size: 25px;
				display: inline-block;
				line-height: 46upx;
			}
			.couponName{
				color: rgba(255,255,255,.5);
				// margin-left: 20upx;
			}
		}
		.explain{
			// width: 500upx;
			width: 100%;
			height: auto;
			line-height: 38upx;
			color: #fff;
			float: left;
		}
	}
</style>
